<template>
  <div class="search-wrapper">
    <div
      class="search-item"
      v-for="(item, index) in searchContent"
      :key="index"
    >
      <div class="item-label">
        {{item.title}}
      </div>
      <div class="item-content">
        <div
          class="small-item"
          v-for="(goal, goalIndex) in item.goals"
          :key="goalIndex"
        >
          <template v-if="goal.type === 'select'">
            <a-select
              size="small"
              mode="multiple"
              :placeholder="goal.name"
              :value="selectArr[goal.key]"
              style="width:200px;margin-right:10px;"
              @change="e => changeSelect(goal.key, e)"
            >
              <a-select-option v-for="str in goal.values" :key="str">
                {{str}}
              </a-select-option>
            </a-select>
          </template>
          <template v-else-if="goal.type === 'check'">
            <div class="check-item">
              <a-checkbox :checked="checkArr.includes(goal.value)" @change="chooseCheck(goal.value)">
                {{goal.name}}
              </a-checkbox>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'House',
  components: {
  },
  data () {
    return {
      searchContent: [
        {
          title: '位置',
          goals: [
            {
              name: '区域',
              key: 'areaSelect',
              type: 'select',
              values: ['莞城区', '东城区', '南城区', '万江区']
            },
            {
              name: '地铁线',
              key: 'subwaySelect',
              type: 'select',
              values: ['2号线']
            }
          ]
        },
        {
          title: '价格',
          goals: [
            {
              name: '50万以下',
              type: 'check',
              value: '50万以下'
            },
            {
              name: '50-80万',
              type: 'check',
              value: '50-80万'
            },
            {
              name: '80-100万',
              type: 'check',
              value: '80-100万'
            },
            {
              name: '100-150万',
              type: 'check',
              value: '100-150万'
            },
            {
              name: '150-200万',
              type: 'check',
              value: '150-200万'
            },
            {
              name: '200-300万',
              type: 'check',
              value: '200-300万'
            }
          ]
        },
        {
          title: '物业类型',
          goals: [
            {
              name: '商品房',
              type: 'check',
              value: '商品房'
            },
            {
              name: '经济适用房',
              type: 'check',
              value: '经济适用房'
            },
            {
              name: '别墅',
              type: 'check',
              value: '别墅'
            },
            {
              name: '写字楼',
              type: 'check',
              value: '写字楼'
            }
          ]
        },
        {
          title: '建筑面积',
          goals: [
            {
              name: '40㎡以下',
              type: 'check',
              value: '40㎡以下'
            },
            {
              name: '40-60㎡',
              type: 'check',
              value: '40-60㎡'
            },
            {
              name: '60-80㎡',
              type: 'check',
              value: '60-80㎡'
            },
            {
              name: '80-100㎡',
              type: 'check',
              value: '80-100㎡'
            },
            {
              name: '100-120㎡',
              type: 'check',
              value: '100-120㎡'
            },
            {
              name: '120-160㎡',
              type: 'check',
              value: '120-160㎡'
            }
          ]
        },
        {
          title: '朝向',
          goals: [
            {
              name: '南北',
              type: 'check',
              value: '南北'
            },
            {
              name: '朝南',
              type: 'check',
              value: '朝南'
            },
            {
              name: '朝东',
              type: 'check',
              value: '朝东'
            },
            {
              name: '朝北',
              type: 'check',
              value: '朝北'
            },
            {
              name: '朝西',
              type: 'check',
              value: '朝西'
            }
          ]
        }
      ],
      selectArr: {
        areaSelect: ['莞城区', '东城区'],
        subwaySelect: []
      },
      checkArr: ['50-80万', '80-100万', '别墅', '朝南', '朝北', '朝东', '40㎡以下']
    }
  },
  computed: {
  },
  methods: {
    chooseCheck (v) {
      if (this.checkArr.includes(v)) {
        const i = this.checkArr.indexOf(v)
        this.checkArr.splice(i, 1)
      } else {
        this.checkArr.push(v)
      }
    },
    changeSelect (k, v) {
      this.selectArr[k] = v
    }
  },
  mounted () {
  }
}
</script>

<style lang="less">
.search-wrapper{
  background-color: #fff;
  padding: 20px;
  .search-item{
    display: flex;
    padding: 10px 0;
    border-top: 1px solid #f0f0f0;
    &:first-child{
      border-top: 0;
      padding-top: 0;
    }
    &:last-child{
      padding-bottom: 0;
    }
    .item-label{
      font-weight: bold;
      width: 80px;
    }
    .item-content{
      display: flex;
      .small-item{
        min-width: 120px;
        .check-item{
          .ant-checkbox{
            zoom: 0.95;
          }
        }
      }
    }
  }
}
</style>
